<template>
  <div class="article-detail">
    <app-header />
    
    <div class="page-content">
      <div
        v-if="article"
        class="article-container"
      >
        <h1>{{ article.title }}</h1>
        <div class="meta">
          <span class="date">{{ article.date }}</span>
        </div>
        <div
          class="content"
          v-html="article.content"
        />
      </div>
      <div
        v-else-if="loading"
        class="loading"
      >
        <van-loading
          v-if="isMobileDevice"
          type="spinner"
        />
        <el-loading v-else />
      </div>
    </div>

    <app-footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useArticleStore } from '@/stores/article'
import { isMobile } from '@/utils/device'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppFooter from '@/components/layout/AppFooter.vue'

const route = useRoute()
const articleStore = useArticleStore()
const isMobileDevice = ref(isMobile())

const article = ref(null)
const loading = ref(true)

onMounted(async () => {
  const id = route.params.id
  if (id) {
    await loadArticle(id)
  }
})

async function loadArticle(id) {
  loading.value = true
  try {
    await articleStore.fetchArticleById(id)
    article.value = articleStore.currentArticle
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.article-detail {
  padding-top: 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .page-content {
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
}

.article-container {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  h1 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
  }

  .meta {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;

    .date {
      color: #999;
    }
  }

  .content {
    line-height: 1.8;
    color: #444;

    p {
      margin-bottom: 1em;
    }

    img {
      max-width: 100%;
      height: auto;
      margin: 1em 0;
    }
  }
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

// 移动端样式
@media screen and (max-width: 768px) {
  .article-detail {
    .page-content {
      padding: 15px;
    }
  }

  .article-container {
    padding: 20px;

    h1 {
      font-size: 1.5em;
    }
  }
}
</style> 